<template>
  <n-config-provider 
    class="app-n-config-provider" 
    :locale="zhCN" 
    :date-locale="dateZhCN" 
    :theme="true ? lightTheme : darkTheme"
    :theme-overrides="themeOverrides">
    
    <slot name="nconfigprovider"></slot>

  </n-config-provider>
</template>

<script setup lang="js">
import { darkTheme, dateZhCN, lightTheme, NConfigProvider, zhCN } from 'naive-ui'

const themeOverrides = {
  common: {
    primaryColor: '#3CB371FF',
    primaryColorHover: '#3CB371E3',
    primaryColorPressed: '#2B4C59FF',
    primaryColorSuppl: '#3CB371E3',

    infoColor: '#2080F0FF',
    infoColorHover: '#4098FCFF',
    infoColorPressed: '#1060C9FF',
    infoColorSuppl: '#4098FCFF',

    successColor: '#18A058FF',
    successColorHover: '#36AD6AFF',
    successColorPressed: '#0C7A43FF',
    successColorSuppl: '#36AD6AFF',

    warningColor: '#F0A020FF',
    warningColorHover: '#FCB040FF',
    warningColorPressed: '#C97C10FF',
    warningColorSuppl: '#FCB040FF',

    errorColor: '#D03050FF',
    errorColorHover: '#DE576DFF',
    errorColorPressed: '#AB1F3FFF',
    errorColorSuppl: '#DE576DFF'
  },
  Button: {
    textColor: '#FFFFFFFF'
  },
  Select: {
    peers: {
      InternalSelection: {
        textColor: '#000000FF'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.app-n-config-provider {
  width: 100%;
  height: 100%;
}
</style>